<template>
    <el-row>
        <el-col :span='12' v-for="(el,index) in baseInfo.options" :key="index" style="margin-bottom:8px;">
            <span>{{el.label}} </span>
            <el-input-number 
                v-model="value[index]" 
                @blur=" blurValue(index) "
                :disabled="el.disabled" 
                :style="el.domCss" 
                size='small'
                :min="el.min" 
                :max="el.max">
            </el-input-number>
        </el-col>
        <el-col :span='24'>
            <span v-if="baseInfo.tips" class="after_tips">{{baseInfo.tips}}</span>
        </el-col>
    </el-row>
</template>

<script>
export default {
    props:{
        baseInfo:{
            type:Object,
            default:()=>{
                return {
                    disabled:false,
                    key:'key',
                    domCss:'',
                    options:[],
                }
            }
        },
    },
    data() {
        return {
            value:[],
        }
    },
    watch: {
        baseInfo:{
            deep:true,
            handler:function(v,oldv){
                this.value = [];
                this.baseInfo.options.forEach(el => {
                    this.value.push(el.defaultValue);
                });
            }
        },
    },
    created() {
        this.value = [];
        this.baseInfo.options.forEach(el => {
            this.value.push(el.defaultValue);
        });
    },
    methods: {
        Change(type){
            this.$emit('EventHandler',type,this.baseInfo.key,this.value);
        },
        blurValue(index){
            let v = JSON.parse(JSON.stringify(this.value));
            v[index] = parseInt(v[index]);
            this.value = v;
        },
    },
}
</script>

<style lang="scss" scoped>
.after_tips {
    font-size: 14px;
    color: #606266;
    line-height: 35px;
}
</style>